<template>
  <view class="content">
    <view class="search-box">
      <!-- mSearch组件 如果使用原样式，删除组件元素-->
      <mSearch
        class="mSearch-input-box"
        :mode="2"
        :placeholder="defaultKeyword"
        @search="doSearch(false)"
        @input="inputChange"
        @confirm="doSearch(false)"
        v-model="keyword"
      ></mSearch>
      <!-- 原样式 如果使用原样式，恢复下方注销代码 -->
      <!-- 						
			<view class="input-box">
				<input type="text" :adjust-position="true" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
				 placeholder-class="placeholder-class" confirm-type="search">
			</view>
			<view class="search-btn" @tap="doSearch(false)">搜索</view> 
      -->
      <!-- 原样式 end -->
    </view>
    <view class="search-keyword">
      <!-- 搜索结果 -->
      <scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
        <block v-for="(row,index) in keywordList" :key="index">
          <view class="keyword-entry" hover-class="keyword-entry-tap">
            <view class="keyword-text" @tap.stop="doSearch(keywordList[index].keyword)">
              <rich-text :nodes="row.htmlStr"></rich-text>
            </view>
            <view class="keyword-img" @tap.stop="setKeyword(keywordList[index].keyword)">
              <image src="/static/images/search/back.png" />
            </view>
          </view>
        </block>
      </scroll-view>
      <scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
        <!-- 历史搜索 -->
        <view class="keyword-block" v-if="oldKeywordList.length>0">
          <view class="keyword-list-header">
            <view>历史搜索</view>
            <view>
              <image @tap="oldDelete" src="/static/images/search/delete.png" />
            </view>
          </view>
          <!-- 搜索的记录 tag -->
          <view class="keyword">
            <view
              v-for="(keyword,index) in oldKeywordList"
              @tap="doSearch(keyword)"
              :key="index"
              class="keyword-item"
            >{{keyword}}</view>
          </view>
        </view>
        <!-- 热门搜索 -->
        <view class="keyword-block">
          <view class="keyword-list-header">
            <view>热门搜索</view>
            <view>
              <image @tap="hotToggle" :src="'/static/images/search/attention'+forbid+'.png'" />
            </view>
          </view>
          <view class="keyword" v-if="forbid==''">
            <view
              v-for="(keyword,index) in hotKeywordList"
              @tap="doSearch(keyword)"
              :key="index"
              class="keyword-item"
            >{{keyword}}</view>
          </view>
          <view class="hide-hot-tis" v-else>
            <view>当前搜热门搜索已隐藏</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
//引用mSearch组件，如不需要删除即可
import mSearch from "@/components/business/search/index.vue";
export default {
  data() {
    return {
      defaultKeyword: "",
      keyword: "",
      oldKeywordList: [],
      hotKeywordList: [],
      keywordList: [],
      forbid: "",
      isShowKeywordList: false
    };
  },
  onLoad() {
    this.init();
  },
  components: {
    //引用mSearch组件，如不需要删除即可
    mSearch
  },
  methods: {
    init() {
      this.loadDefaultKeyword();
      this.loadOldKeyword();
      this.loadHotKeyword();
    },
    blur() {
      uni.hideKeyboard();
    },
    //加载默认搜索关键字
    loadDefaultKeyword() {
      //定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
      this.defaultKeyword = "搜索课程、关键词";
    },
    //加载历史搜索,自动读取本地Storage
    loadOldKeyword() {
      uni.getStorage({
        key: "OldKeys",
        success: res => {
          var OldKeys = JSON.parse(res.data);
          this.oldKeywordList = OldKeys;
        }
      });
    },
    //加载热门搜索
    loadHotKeyword() {
      //定义热门搜索关键字，可以自己实现ajax请求数据再赋值
      this.hotKeywordList = ["法律", "语言", "公证"];
    },
    //监听输入
    inputChange(event) {
      //兼容引入组件时传入参数情况
      var keyword = event.detail ? event.detail.value : event;
      if (!keyword) {
        this.keywordList = [];
        this.isShowKeywordList = false;
        return;
      }
      // this.isShowKeywordList = true;
      //以下示例截取淘宝的关键字，请替换成你的接口
      // uni.request({
      //   url: "https://suggest.taobao.com/sug?code=utf-8&q=" + keyword, //仅为示例
      //   success: res => {
      //     this.keywordList = [];
      //     this.keywordList = this.drawCorrelativeKeyword(
      //       res.data.result,
      //       keyword
      //     );
      //   }
      // });
    },
    //高亮关键字
    drawCorrelativeKeyword(keywords, keyword) {
      var len = keywords.length,
        keywordArr = [];
      for (var i = 0; i < len; i++) {
        var row = keywords[i];
        //定义高亮#9f9f9f
        var html = row[0].replace(
          keyword,
          "<span style='color: #9f9f9f;'>" + keyword + "</span>"
        );
        html = "<div>" + html + "</div>";
        var tmpObj = {
          keyword: row[0],
          htmlStr: html
        };
        keywordArr.push(tmpObj);
      }
      return keywordArr;
    },
    //顶置关键字
    setKeyword(index) {
      this.keyword = this.keywordList[index].keyword;
    },
    //清除历史搜索
    oldDelete() {
      uni.showModal({
        content: "确定清除历史搜索记录？",
        success: res => {
          if (res.confirm) {
            console.log("用户点击确定");
            this.oldKeywordList = [];
            uni.removeStorage({
              key: "OldKeys"
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    //热门搜索开关
    hotToggle() {
      this.forbid = this.forbid ? "" : "_forbid";
    },
    //执行搜索
    doSearch(keyword) {
      this.keyword = keyword ? keyword : this.keyword;
      this.saveKeyword(keyword); //保存为历史
      // uni.showToast({
      //   title: keyword,
      //   icon: "none",
      //   duration: 2000
      // });
      uni.navigateTo({
        url: `/pages/classify/result/index?val=${this.keyword}`
      });
    },
    //保存关键字到历史记录
    saveKeyword(keyword) {
      uni.getStorage({
        key: "OldKeys",
        success: res => {
          var OldKeys = JSON.parse(res.data);
          var findIndex = OldKeys.indexOf(keyword);
          if (findIndex == -1) {
            OldKeys.unshift(keyword);
          } else {
            OldKeys.splice(findIndex, 1);
            OldKeys.unshift(keyword);
          }
          //最多10个纪录
          OldKeys.length > 10 && OldKeys.pop();
          uni.setStorage({
            key: "OldKeys",
            data: JSON.stringify(OldKeys)
          });
          this.oldKeywordList = OldKeys; //更新历史搜索
        },
        fail: e => {
          var OldKeys = [keyword];
          uni.setStorage({
            key: "OldKeys",
            data: JSON.stringify(OldKeys)
          });
          this.oldKeywordList = OldKeys; //更新历史搜索
        }
      });
    }
  }
};
</script>
<style lang="scss" src="./index.scss">
</style>
